<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>美食推荐</title>
  <link rel="stylesheet" href="styles.css">
  <style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
    width: 1226px;
    height: 100px;
    margin: auto;
}

header {
    background-color: #8cc;
    color: white;
    text-align: center;
    padding: 20px;
    width: 1206px;
    height: 40px;
    margin: auto;
}
nav {
            background-color: #8cc;
            color: white;
            text-align: center;
            padding: 10px;
            width: 1226px;
            height: 80px;
            margin: auto;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            width: 1226px;
            height: 80px;
            margin: auto;
        }
.ems {
            background-color: white;
            color: #000;
            width: 1226px;
            height: 60px;
            font-size: 20px;
            text-align: center;




        }

        .nav {
            width: 1226px;
            height: 58px;
            position: relative;
            margin: auto;
            clear: both;
        }

        .nav h2 {
            margin: 0;
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
            color: #424242;
        }

        .nav div {
            position: absolute;
            font-size: 16px;
            line-height: 58px;
            color: #424242;
            float: left;
            right: 0;
            top: 0;
        }
        .content_left{
            width: 1226px;
            height: 200px;
            float: left;

        }

        .content_left div{
            margin-right: 30px;
        }
    
        .content_left img {
            width: 200px;
            height: 200px;
            float: left;
        }

        .content_right{
            width: 1226px;
            height: 200px;
          
        }

        .content_right div{
            margin-right: 30px;
            margin-top: 40px;
        }
    
        .content_right img {
            width: 200px;
            height: 200px;
            float: left;
        }
       

        .crt01 {
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;
            float: left;
            margin-left: 12px;
            box-sizing: border-box;
            transition: all .2s linear;
        }

        .crt01:hover {
            transform: translate(0, -10px);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }


        .crt01 img {
            width: 200px;
            height: 200px;

        }




        footer {
         background-color: #8cc;
         width: 1226px;
            height: 40px;
         color: white;
        text-align: center;
        padding: 20px 0;
         box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
         clear: both;
            }

          footer p {
        font-size: 16px;
        margin: 0;
       
          }
          .social-icons {
           margin-top: 10px;
        }

      .social-icons i {
          margin: 0 10px;
          font-size: 24px;
         }
       


</style>
</head>

<body>
    <header>
        <h1>走了么旅游网</h1>
    </header>
    <nav>
        文创介绍
    </nav>
    <div class="ems">
        文创介绍
    </div>
    
  <main>
    <div class="food-item">
        <img src="imgs/zzt10.jpg" alt="">
      <h2>傣族泼水节</h2>
      <p>泼水节，是中国傣族、阿昌族、布朗族、佤族、德昂族等少数民族和中南半岛某些民族的新年节日。为傣族一年中最盛大的传统节日。中国傣族节期在傣历六七月（清明节后十日左右），各勘过泼水节的时间会相差一两天，不过都在公历4月8日至22日之间。</p >
    </div>
    <div class="food-item">
        <img src="imgs/zzt11.jpg" alt="">
      <h2>蒙古族那达慕</h2>
      <p>“那达慕”是蒙古语，亦称“那雅尔(Nair)”，“那达慕”是蒙语的译音，意为“娱乐、游戏”，以表示丰收的喜悦之情。“那达慕”大会是蒙古族历史悠久的传统节日，在蒙古族人民的生活中占有重要地位。</p >
    </div>
    <div class="food-item">
        <img src="imgs/zzt12.jpg" alt="">
      <h2>彝族的‌火把节</h2>
      <p>火把节是彝族、白族、纳西族、基诺族、拉祜族等民族的传统节日，有着深厚的民俗文化内涵，被称为“东方的狂欢节”不同的民族举行火把节的时间也不同，大多是在农历的六月二十四，主要活动有斗牛、斗羊、斗鸡、赛马、摔跤、歌舞表演、选美等。在新时代，火把节被赋予了新的民俗功能，产生了新的形式。 </p >
    </div>
    <div class="food-item">
        <img src="imgs/zzt13.jpg" alt="">
      <h2>苗年的‌千人长桌宴</h2>
      <p>苗族千人长桌宴是苗族宴席的最高形式与隆重礼仪，已有几千年的历史。通常用于接亲嫁女、满月酒以及村寨联谊宴饮活动。左边是主人座位，右边是客人座位。主客相对，敬酒劝饮并对酒高歌。</p >
    </div>
  </main>

  <div class="nav">
    <h2>文创产品</h2>
    <div>查看更多</div>
</div>



<div class="content_left">

    <div class="crt01">
        
        <img src="imgs/zzt0.jpg" alt="">
    </div>
    <div class="crt01">
        <img src="imgs/zzt1.jpg" alt="">
    </div>
    <div class="crt01">
        <img src="imgs/zzt2.jpg" alt="">
    </div>
    <div class="crt01">
        <img src="imgs/zzt3.jpg" alt="">
    </div>
    <div class="crt01">
        <img src="imgs/zzt4.jpg" alt="">
    </div>

</div>

<div class="content_right">

    <div class="crt01">
        <img src="imgs/zzt5.jpg" alt="">
    </div>
    <div class="crt01">
        <img src="imgs/zzt6.jpg" alt="">
        
    </div>
    <div class="crt01">
        <img src="imgs/zzt7.jpg" alt="">
    </div>
    <div class="crt01">
        <img src="imgs/zzt8.jpg" alt="">
    </div>
    <div class="crt01">
        <img src="imgs/zzt9.jpg" alt="">
    </div>

</div>

<footer>
    <p>版权所有 &copy; 2024 走了么旅游官网</p >
     <div class="social-icons">
     <i class="fab fa-facebook"></i>
     <i class="fab fa-twitter"></i>
    <i class="fab fa-instagram"></i>
     </div>
     </footer>
    
     <script>
     window.addEventListener('load', function () {
     document.body.classList.add('animate__animated', 'animate__fadeIn');
    });
    </script>
  
</body>

</html>